<template>
	<div class="containers">
		<div ref="canvas" class="canvas" />
		<div id="js-properties-panel" class="properties-panel-parent" />
		<div class="buttons">
			<el-button type="primary" size="mini" @click="handleUndo">后退</el-button>
			<el-button type="success" size="mini" @click="handleRedo">前进</el-button>
		</div>
		<el-dialog title="bpmn编辑按钮事件" :visible.sync="nodeVisible" width="30%">
			<p>节点类型：{{ nodeInfo.type }}</p>
			<p>节点id:{{ nodeInfo.id }}</p>

			<span slot="footer" class="dialog-footer">
				<el-button @click="toggeleNodeInfo">取 消</el-button>
				<el-button type="primary" @click="toggeleNodeInfo">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import Modeler from "bpmn-js/lib/Modeler"; // 引入流程图
import propertiesPanelModule from "bpmn-js-properties-panel"; //  这里引入的是右侧属性栏这个框
import propertiesProviderModule from "bpmn-js-properties-panel/lib/provider/camunda"; // 而这个引入的是右侧属性栏里的内容
import zhCN from "./customTranslate"; // 中文
import camundaModdleDescriptor from "camunda-bpmn-moddle/resources/camunda"; // 外部任务配置
import customModule from "./custom"; // 自定义的节点
import { mapState, mapMutations } from "vuex";
export default {
	data() {
		return {
			modeler: null,
		};
	},
	computed: {
		...mapState({
			nodeVisible: state => state.bpmn.nodeVisible,
			nodeInfo: state => state.bpmn.nodeInfo,
		}),
	},
	mounted() {
		// 生成实例
		this.modeler = new Modeler({
			container: this.$refs.canvas,
			width: "100%",
			height: "100%",
			propertiesPanel: {
				parent: "#js-properties-panel",
			},
			additionalModules: [
				propertiesPanelModule, // 右边工具栏
				propertiesProviderModule, // 右边的工具栏
				{ translate: ["value", zhCN] }, // 中文
				customModule,
			],
			moddleExtensions: {
				camunda: camundaModdleDescriptor,
			},
		});

		this.createNewDiagram(); // 新增流程定义
		this.bpmnEvent();
	},

	methods: {
		...mapMutations({ toggeleNodeInfo: "bpmn/toggeleNodeInfo" }),
		// 注册节点事件，可以写多个事件
		bpmnEvent() {
			const eventBus = this.modeler.get("eventBus");
			["element.click", "element.hover", "element.changed"].forEach(eventType => {
				eventBus.on(eventType, e => {
					const { element } = e;
					// console.log(eventType, element);
					if (!e || !element || !element.parent || element.type === "bpmn:Process") return; // 这里我的根元素是bpmn:Process
					if (eventType === "element.click") {
						console.log(element);
						// this.changeColor(element)
						// this.overlays(element)
					} else if (eventType === "element.hover") {
						// 鼠标滑过节点后想要做的处理
						// console.log("鼠标经过节点啦~");
					} else if (eventType === "element.changed") {
						console.log("元素改变触发");
					}
				});
			});
		},
		// 后退
		handleUndo() {
			this.modeler.get("commandStack").undo();
		},
		// 前进
		handleRedo() {
			this.modeler.get("commandStack").redo();
		},
		// 新增流程定义
		createNewDiagram() {
			// 自定义的xml模板，可以自己修改
			const xml = sessionStorage.getItem("xml");
			const diagramXML = `<?xml version="1.0" encoding="UTF-8"?>↵<bpmn:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" id="Definitions_0fppxr8" targetNamespace="http://bpmn.io/schema/bpmn"><bpmn:process id="Process_stVZbQ" name="失业保险" isExecutable="true"><bpmn:startEvent id="StartEvent_1" name="begin&#10;" camunda:formKey="{&#34;list&#34;:[{&#34;type&#34;:&#34;input&#34;,&#34;icon&#34;:&#34;icon-input&#34;,&#34;options&#34;:{&#34;width&#34;:&#34;100%&#34;,&#34;defaultValue&#34;:&#34;&#34;,&#34;required&#34;:false,&#34;dataType&#34;:&#34;string&#34;,&#34;pattern&#34;:&#34;&#34;,&#34;placeholder&#34;:&#34;&#34;,&#34;disabled&#34;:false,&#34;remoteFunc&#34;:&#34;func_1599795735000_43209&#34;},&#34;name&#34;:&#34;问题类型&#34;,&#34;key&#34;:&#34;1599795735000_43209&#34;,&#34;model&#34;:&#34;problemType&#34;,&#34;rules&#34;:[{&#34;type&#34;:&#34;string&#34;,&#34;message&#34;:&#34;问题类型格式不正确&#34;}]},{&#34;type&#34;:&#34;color&#34;,&#34;icon&#34;:&#34;icon-color&#34;,&#34;options&#34;:{&#34;defaultValue&#34;:&#34;&#34;,&#34;disabled&#34;:false,&#34;showAlpha&#34;:false,&#34;required&#34;:false,&#34;remoteFunc&#34;:&#34;func_1602746485000_64246&#34;},&#34;name&#34;:&#34;颜色选择器&#34;,&#34;key&#34;:&#34;1602746485000_64246&#34;,&#34;model&#34;:&#34;color_1602746485000_64246&#34;,&#34;rules&#34;:[]},{&#34;type&#34;:&#34;radio&#34;,&#34;icon&#34;:&#34;icon-radio-active&#34;,&#34;options&#34;:{&#34;inline&#34;:false,&#34;defaultValue&#34;:&#34;&#34;,&#34;showLabel&#34;:false,&#34;options&#34;:[{&#34;value&#34;:&#34;Option 1&#34;,&#34;label&#34;:&#34;Option 1&#34;},{&#34;value&#34;:&#34;Option 2&#34;,&#34;label&#34;:&#34;Option 2&#34;},{&#34;value&#34;:&#34;Option 3&#34;,&#34;label&#34;:&#34;Option 3&#34;}],&#34;required&#34;:false,&#34;width&#34;:&#34;&#34;,&#34;remote&#34;:false,&#34;remoteOptions&#34;:[],&#34;props&#34;:{&#34;value&#34;:&#34;value&#34;,&#34;label&#34;:&#34;label&#34;},&#34;remoteFunc&#34;:&#34;func_1602746487000_90659&#34;,&#34;disabled&#34;:false},&#34;name&#34;:&#34;单选框组&#34;,&#34;key&#34;:&#34;1602746487000_90659&#34;,&#34;model&#34;:&#34;radio_1602746487000_90659&#34;,&#34;rules&#34;:[]},{&#34;type&#34;:&#34;textarea&#34;,&#34;icon&#34;:&#34;icon-diy-com-textarea&#34;,&#34;options&#34;:{&#34;width&#34;:&#34;100%&#34;,&#34;defaultValue&#34;:&#34;&#34;,&#34;required&#34;:false,&#34;disabled&#34;:false,&#34;pattern&#34;:&#34;&#34;,&#34;placeholder&#34;:&#34;&#34;,&#34;remoteFunc&#34;:&#34;func_1599795736000_77890&#34;},&#34;name&#34;:&#34;问题描述&#34;,&#34;key&#34;:&#34;1599795736000_77890&#34;,&#34;model&#34;:&#34;des&#34;,&#34;rules&#34;:[]},{&#34;type&#34;:&#34;textarea&#34;,&#34;icon&#34;:&#34;icon-diy-com-textarea&#34;,&#34;options&#34;:{&#34;width&#34;:&#34;100%&#34;,&#34;defaultValue&#34;:&#34;&#34;,&#34;required&#34;:false,&#34;disabled&#34;:false,&#34;pattern&#34;:&#34;&#34;,&#34;placeholder&#34;:&#34;&#34;,&#34;remoteFunc&#34;:&#34;func_1599795737000_37954&#34;},&#34;name&#34;:&#34;其他&#34;,&#34;key&#34;:&#34;1599795737000_37954&#34;,&#34;model&#34;:&#34;other&#34;,&#34;rules&#34;:[]},{&#34;type&#34;:&#34;fileupload&#34;,&#34;icon&#34;:&#34;icon-wenjianshangchuan&#34;,&#34;options&#34;:{&#34;defaultValue&#34;:[],&#34;disabled&#34;:false,&#34;length&#34;:5,&#34;multiple&#34;:false,&#34;isDelete&#34;:true,&#34;remoteFunc&#34;:&#34;func_1599795743000_4020&#34;},&#34;name&#34;:&#34;文件&#34;,&#34;key&#34;:&#34;1599795743000_4020&#34;,&#34;model&#34;:&#34;fileupload&#34;,&#34;rules&#34;:[]}],&#34;config&#34;:{&#34;labelWidth&#34;:120,&#34;labelPosition&#34;:&#34;right&#34;,&#34;tableName&#34;:&#34;&#34;,&#34;size&#34;:&#34;mini&#34;}}"><bpmn:outgoing>SequenceFlow_1l0ax8h</bpmn:outgoing></bpmn:startEvent><bpmn:sequenceFlow id="SequenceFlow_1l0ax8h" sourceRef="StartEvent_1" targetRef="Task_0lr8bvq" /><bpmn:userTask id="Task_0lr8bvq" camunda:assignee="qinlil" camunda:candidateGroups=""><bpmn:incoming>SequenceFlow_1l0ax8h</bpmn:incoming><bpmn:outgoing>SequenceFlow_1o718gl</bpmn:outgoing></bpmn:userTask><bpmn:endEvent id="EndEvent_19wmu5l"><bpmn:incoming>SequenceFlow_1o718gl</bpmn:incoming></bpmn:endEvent><bpmn:sequenceFlow id="SequenceFlow_1o718gl" sourceRef="Task_0lr8bvq" targetRef="EndEvent_19wmu5l" /></bpmn:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_stVZbQ"><bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1"><dc:Bounds x="173" y="102" width="36" height="36" /><bpmndi:BPMNLabel><dc:Bounds x="178" y="145" width="27" height="27" /></bpmndi:BPMNLabel></bpmndi:BPMNShape><bpmndi:BPMNEdge id="SequenceFlow_1l0ax8h_di" bpmnElement="SequenceFlow_1l0ax8h"><di:waypoint x="209" y="120" /><di:waypoint x="259" y="120" /></bpmndi:BPMNEdge><bpmndi:BPMNShape id="UserTask_196ql50_di" bpmnElement="Task_0lr8bvq"><dc:Bounds x="259" y="80" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="EndEvent_19wmu5l_di" bpmnElement="EndEvent_19wmu5l"><dc:Bounds x="409" y="102" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNEdge id="SequenceFlow_1o718gl_di" bpmnElement="SequenceFlow_1o718gl"><di:waypoint x="359" y="120" /><di:waypoint x="409" y="120" /></bpmndi:BPMNEdge></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn:definitions>"
        `;
			// 在实例中导入xml
			// this.modeler.importXML(diagramXML, function (err) {
			//   if (err) {
			//     console.error(err);
			//   }
			// });

			this.modeler
				.importXML(diagramXML)
				.then(result => {
					const { warnings } = result;
					console.log("success !", warnings);
					this.modeler.get("canvas").zoom("fit-viewport");
				})
				.catch(function (err) {
					const { warnings, message } = err;
					console.log("something went wrong:", warnings, message);
				});
		},
	},
};
</script>

<style lang="scss">
/*左边工具栏以及编辑节点的样式*/
@import "~bpmn-js/dist/assets/diagram-js.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css";
@import "~bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";
/*右边工具栏样式*/
@import "~bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css";
@import "./custom/index.scss";
.highlight-overlay {
	background-color: green; /* color elements as green */
	opacity: 0.4;
	pointer-events: none; /* no pointer events, allows clicking through onto the element */
}

.bjs-powered-by {
	display: none;
}
.buttons {
	position: absolute;
	bottom: 40px;
	left: 100px;
	padding: 0;
	margin: 0;
	list-style: none;
	& > li {
		display: inline-block;
		margin-right: 10px;
		& > a {
			background: #ddd;
			border: solid 1px #666;
			display: inline-block;
			padding: 5px;
			&.active {
				opacity: 1;
			}
		}
	}
}
.properties-panel-parent {
	width: 260px;
	border-left: 1px solid #ccc;
	overflow: auto;
	position: absolute;
	top: 21px;
	right: 0px;
	height: calc(100% - 40px);
	&:empty {
		display: none;
		&.djs-properties-panel {
			padding-bottom: 70px;
			min-height: 100%;
		}
	}
}

.containers {
	position: absolute;
	background-color: #ffffff;
	width: calc(100%);
	height: calc(100% - 40px);
}
.canvas {
	width: 100%;
	height: 100%;
}
.panel {
	position: absolute;
	right: 0;
	top: 0;
	width: 300px;
}
</style>
